<template>
  <view>
    <!-- 空页面 -->
    <view v-if="pageParams.state && pageParams.state == 'EMPTY'" class="main">
      <image class="image" :src="vuex_imgPath+'/empty2x.png'" />
      <text class="text">{{ pageParams.emptyTitle }}</text>
      <view v-if="pageParams.showButton">
        <button
          class="handle-btn btn-noborder"
          :plain="true"
          @click.stop="$u.throttle(testAgainFn, 500)"
        >
          {{ pageParams.btnName || '重试' }}
        </button>
      </view>
    </view>
    <!-- 错误页面 -->
    <view v-else-if="pageParams.state && pageParams.state == 'ERROR'" class="main">
      <image class="image error-img" :src="vuex_imgPath+'/error.png'" />
      <text class="text">{{ pageParams.errorTitle }}</text>
      <view v-if="pageParams.showButton">
        <button
          class="handle-btn btn-noborder"
          :plain="true"
          @click="$u.throttle(testAgainFn, 500)"
        >重试</button>
      </view>
    </view>
    <!-- 空字符串时候显示空白 -->
    <!--    <view v-else-if="pageParams.state == ''" />-->
    <!-- 有数据时候，自定义页面 -->
    <view v-else>
      <slot />
    </view>
    <template v-if="showTabbar">
      <YcTabbar
        v-if="!vuex_loginStatus || (vuex_loginStatus && vuex_memberInfo && (vuex_memberInfo.accountType == 20 || vuex_memberInfo.accountType == 30))"
      />
      <Tabbar
        v-else
      />
    </template>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import Tabbar from '@/components/tabbar/index';
import YcTabbar from '@/components/tabbar/ycIndex';
export default {
  name: 'Index',
  components: { Tabbar, YcTabbar },
  props: {
    pageParams: {
      type: Object,
      default: null
    },
    showTabbar: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    testAgainFn() {
      this.$emit('testAgainFn', this.pageParams.methodName)
    },
    toast(params) {
      const defaultParams = { type: 'default' }
      const curParams = { ...defaultParams, ...params }
      this.$refs.uToast.show(curParams)
    }
  }
}
</script>

<style scoped lang="scss">
.main{
  color: white;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  /*height: 100vh;*/
  flex-direction: column;
  font-size: 28rpx;
}

.image{
  width: 336rpx;
  height: 448rpx;
  margin-top: 40%;
  margin-bottom: 10rpx;
}
.error-img{
  width: 326rpx;
  height: 326rpx;
}
.text{
  font-size: 24rpx;
  margin-top: 20rpx;
  color: #666666;
  text-align: center;
  font-weight: 400;
}
.handle-btn{
  width: 184rpx;
  height: 48rpx;
  background: $uni-orange;
  border-radius: 24rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  margin-top: 36rpx;
}
</style>
